<template>
  <div class="assets">
    <el-form ref="ruleForm" :model="formDate" size="mini" label-width="130px" label-position="right">
      <div v-for="(sellPoint, index) in formDate.assets" :key="index" class="goodsList">
        <h2>
          <span>UPC：{{ sellPoint.upc }}</span>
          <span>商品名称：{{ sellPoint.skuName }}</span>
        </h2>

        <el-form-item
          v-if="sellPoint.creationWay == 4"
          class="photo"
          label="上传商品图片"
          :prop="'assets.' + index + '.picList'"
          :rules="{ required: true, message: ' ', trigger: 'blur' }"
        >
          <div class="uploadPhoto">
            <div v-for="imgUrl in formDate.assets[index].picList" :key="imgUrl" class="elImg">
              <el-image :src="imgUrl | transImgUrl" :preview-src-list="formDate.assets[index].picList | transImgUrl" />
              <div v-if="!isDisabled" class="del" @click="deletePhoto(imgUrl, formDate.assets[index].id, formDate.assets[index].picList)">
                <i class="el-icon-delete" />
              </div>
            </div>
            <div v-if="formDate.assets[index].picList.length == 0 && isDisabled" class="tips">暂未上传图片</div>
            <!-- accept="image/png,image/jpg,image/jpeg" -->
            <el-upload
              v-if="!isDisabled && formDate.assets[index].picList.length < 30"
              :on-change="
                (file, fileList) => {
                  handleOnChange(file, fileList, formDate.assets[index].picList, formDate.assets[index].id)
                }
              "
              :auto-upload="false"
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".png,.jpg,.jpeg"
              multiple
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item
          v-if="sellPoint.creationWay == 3"
          class="photo"
          label="上传文描"
          :prop="'assets.' + index + '.content'"
          :rules="{ required: true, message: ' ', trigger: 'blur' }"
        >
          <detailPage :id="formDate.assets[index].id" ref="detailPageRef" :goods-info="formDate.assets[index]" :title-show="false" :is-disabled="isDisabled" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { uploadSkuOptionalResource, deleteSkuOptionalResource } from '@/api/coi/onlineTaskAPI/sku'
import detailPage from './detailPage.vue'
import bus from '@/utils/eventBus.js'
import { authentication } from '@/utils/processingData.js'

export default {
  name: 'Assets',
  components: { detailPage },
  filters: {
    transImgUrl(url) {
      return authentication(url)
    }
  },
  props: {
    formDate: {
      type: Object,
      default: () => {
        return {
          assets: []
        }
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postType: [
        { value: 0, label: '未寄样' },
        { value: 1, label: '已寄样' },
        { value: 2, label: '自送' }
      ],
      payedFlag: [
        { value: 0, label: '未付款' },
        { value: 1, label: '已付款' }
      ],
      batchNum: 0
    }
  },
  methods: {
    getEditor(value, item) {
      item.content = value
    },
    showMessage(message, type = 'success') {
      this.$message({
        message,
        type
      })
    },
    handleOnChange(file, fileList, urlList, id) {
      setTimeout(() => {
        fileList.length = 0
      }, 500)
      if (fileList.length + urlList.length > 30) {
        this.showMessage('图片的最大数量为30张！', 'error')
        return
      }
      if (file.raw.type !== 'image/jpg' && file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.showMessage('仅支持上传jpg/png格式的图片！', 'error')
        return
      }
      var size = file.size / 1024 / 1024
      if (size > 3) {
        return this.showMessage('图片大小大于3M', 'error')
      }
      this.upload(file, urlList, id)
    },
    // 上传文件至服务器
    async upload(file, urlList, id) {
      try {
        this.batchNum++
        bus.$emit('loadingChange', true)
        const resourceType = file.raw.type === 'image/png' ? 3 : 1
        const formData = new FormData()
        formData.append('file', file.raw)
        formData.append('skuId', id)
        formData.append('resourceType', resourceType)
        const result = await uploadSkuOptionalResource(formData)
        if (result.code === '0') {
          urlList.push(result.result.resourceUrl)
        }
      } finally {
        this.batchNum--
        if (this.batchNum === 0) bus.$emit('loadingChange', false)
      }
    },
    deletePhoto(imgUrl, id, urlList) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { result } = await deleteSkuOptionalResource({ skuId: id, url: imgUrl })
          if (result) {
            this.$message({
              message: result,
              type: 'success'
            })
            const index = urlList.findIndex((item) => item === imgUrl)
            urlList.splice(index, 1)
          }
        })
        .catch(() => {})
    },
    // Remove the rules
    removeRules() {
      this.$refs.ruleForm.resetFields()
      this.tipShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.assets {
  .tip {
    color: #aaa;
    font-size: 14px;
  }
  .goodsList {
    padding-top: 10px;
    border-bottom: dashed #ccc 1px;
    &:last-child {
      border-bottom: none;
    }
    h2 {
      font-size: 14px;
      height: 40px;
      display: flex;
      align-items: center;
      span {
        margin-right: 20px;
      }
    }
  }
}
/deep/ .el-input {
  width: 300px;
}

/deep/ .el-date-editor.el-input {
  width: auto;
}
/deep/ .el-upload--picture-card {
  width: 100px;
  height: 100px;
}
/deep/ .el-upload {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .avatar {
  width: 100px;
  height: 100px;
}
/deep/ .el-upload--picture-card i {
  font-size: 15px;
}
/deep/ .el-upload-list--picture-card {
  display: flex;
  flex-wrap: wrap;
}
.uploadPhoto {
  display: flex;
  flex-wrap: wrap;
  .elImg {
    margin-right: 10px;
    margin-bottom: 10px;
    height: 100px;
    width: 100px;
    display: inline-block;
    position: relative;
    &:hover .del {
      display: block;
      height: 20px;
    }
    .del {
      border-radius: 1px;
      text-align: center;
      display: none;
      width: 100%;
      overflow: hidden;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      color: #fff;
      line-height: 20px;
      font-size: 12px;
      transition: linear all 0.5s;
    }
    /deep/ .el-image {
      border-radius: 5px;
      height: 100%;
      width: 100%;
    }
  }
  .tips {
    color: #aaa;
  }
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
/deep/ .editor-wrapper {
  padding: 0 !important;
}
</style>
